<template>
	<view class="template-tools tn-safe-area-inset-bottom">
		<view class="tools-content tn-margin">
			<tn-grid class="item cell-group" col="4" :border="false">
				<tn-grid-item v-for="(item, index) in toolList" :key="index" @click="toolNav(index)">
					<view :class="itemStyle(item)" class="item_icon tn-shadow-blur">
						<view :class="'tn-icon-'+ item.icon +'-fill'"></view>
					</view>
					<text class="item_title">{{ item.title }}</text>
				</tn-grid-item>
			</tn-grid>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Tools',
		data() {
			return {
				toolList: [{
						title: '房贷计算器',
						color: 'purplered',
						icon: 'home-capsule',
						url: ''
					},
					{
						title: '养老计算器',
						color: 'indigo',
						icon: 'identity',
						url: ''
					},
					{
						title: '预算管理',
						color: 'indigo',
						icon: 'pay',
						url: '/pages/tools/invoice/index'
					},
					{
						title: '发票助手',
						color: 'purple',
						icon: 'ticket',
						url: '/pages/tools/invoice/index'
					}
				]
			}
		},
		mounted() {},
		computed: {
			itemStyle() {
				return function(item) {
					return `tn-main-gradient-${item.color}--light tn-color-${item.color}`;
				}
			},
		},
		methods: {
			toolNav(index) {
				let curr = this.toolList[index];
				if (curr.url) {
					this.$common.navigateTo(curr.url);
				} else {
					this.$common.msg('功能暂未开发');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tools-content {
		.item {
			.item_icon {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}
			.item_title{
				font-size: 30rpx;
				font-weight: bolder;
			}
		}
	}
</style>